<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.插值表达式与注释</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--5、设置script标签的类型为text/babel-->
    <script type="text/babel">
        //表达式：是可以能都得到一个结果的式子
        //变量  num
        //普通的值  100  "aa"  true false...
        //函数的返回值
        //对象的方法的结果值  arr.join()  string
        //计算结果 1+1
        //判断结果 1<2?10:20

        //语句：if...else、for循环、try{}catch{}...  主要是控制程序的走向
        //JSX中只允许写表达式，不允许写语句;

        //ejs: <%= 值 %>  <% if(){...} %>
        //JSX: {}  插值表达式


        //6、创建容器元素对象
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        let str = "百度";
        str = '淘宝';
        let isGood = true;
        isGood = false;
        function fun() {
            return 'fun';
        }
        function fun1() {
            return { a: 1, b: 2 }
        }
        //7、创建虚拟DOM元素对象
        // - 可以是任意基本类型数据值(string、number)
        //      - 如果{ } 内的是用双引号，单引号，反引号包裹，则是字符串；
        //      - 如果{ } 内是数字，即是要输出该数字；
        //      - 如果{ } 内是undefined, null, true, false`不会进行渲染`。
        //      - 可以是一个 JS 数组，会直接进行展开渲染（不包含逗号 ）, `不允许是对象`
        // - 可以是 JS 的表达式, `不允许在{}内写JS语句`
        // - 可以是 react 元素对象
        if (1 < 2) {
            const vDOM = <div>
                <p>尚硅谷</p>
                <p>{"尚硅谷"}</p>
                <p>{str}</p>
                <p>{'新浪'}</p>
                <p>{`谷歌`}</p>
                <p>{"尚硅谷" + '棒棒的'}</p>
                <p>{1000}</p>
                <p>{null}</p>
                <p>{undefined}</p>
                <p>{true}</p>
                <p>{false}</p>
                <p>{isGood ? '心情好' : '心情很糟糕'}</p>
                <p>{[1, 2, 3, 4]}</p>
                <p>{[1, 2, 3, 4].join('/')}</p>
                <p>{fun()}</p>
                {
                    // <p>{fun1()}</p>
                    /* 
                        <p>{fun1()}</p> 
                    */
                }
                <p>{10 + 20}</p>
                <p>{React.createElement('span', {}, '小米')}</p>
            </div>
            //8、渲染
            root.render(vDOM);

        }



    </script>
</body>

</html>